<template>
  <section>
    <van-sticky>
      <PageHeader title="红娘管理"/>
    </van-sticky>

    <van-list
      class="mt10"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="requestData">
      <div class="flex flex-col bg-color-white pd10 mb10 font-common record-item" v-for="(item, index) in dataList" :key="index">
        <div class="flex flex-row flex-center border-bottom-gray pt5 pb5">
          <div class="flex flex-row flex-left flex-centerV flex-1">
            <img :src="item.avatar_url ? item.avatar_url : BASE_STATIC_URL + 'images/mp/avatar.jpeg'" class="avatar" />
            <span class="ml10">{{item.nick}}</span>
          </div>
          <div class="flex flex-row flex-right flex-centerV">
            <span>手机号：<a :href="'tel:'+item.mobile">{{item.mobile}}</a></span>
          </div>
        </div>

        <div class="flex flex-row flex-centerV flex-left border-bottom-gray pt5 pb5">
          引流：直属粉丝 <span class="color-red">{{item.fans.first}}</span> 人，间接粉丝 <span class="color-red">{{item.fans.second}}</span> 人
        </div>

        <div class="flex flex-row flex-left border-bottom-gray pt5 pb5">
          收益：共 <span class="color-red">{{item.salary.all}}</span> 元，今日 <span class="color-red">{{item.salary.today}}</span> 元，昨日 <span class="color-red">{{item.salary.yesterday}}</span> 元，过去7日 <span class="color-red">{{item.salary.last7days}}</span> 元
        </div>

        <div class="flex flex-row flex-center font-common pt10 pb10">
          <div class="flex flex-row flex-center flex-1" @click="onTerminateTap(index)">
            <i class="iconfont icon-suoding mr5" style="font-size: 20px;" />取消资格
          </div>

          <div class="flex flex-row flex-center flex-1" @click="$router.push({name: 'MatchmakerRecommend', params: {userId: item.id}})">
            <van-icon name="share-o" size="20px" class="mr5" />推荐记录
          </div>

          <div class="flex flex-row flex-center flex-1" @click="$router.push({name: 'MatchmakerSalary', params: {userId: item.id}})">
            <van-icon name="balance-o" size="20px" class="mr5" />推广收益
          </div>
        </div>

      </div>

    </van-list>

  </section>
</template>

<script>
import {matchmakerListsUri, matchmakerTerminateUri} from "../../common/api";
import PageHeader from "../componets/PageHeader";
import Vue from 'vue';
import {Dialog} from 'vant';

Vue.use(Dialog);

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      currentPage: 1,
      lastPage: 0,
      total: 0,
      pageSize: 10,
      loading: false,
      finished: false,
      dataList: []
    }
  },
  methods: {
    onTerminateTap(index) {
      const that = this;
      Dialog.confirm({
        message: '确定要取消该用户的红娘资格吗？'
      }).then(() => { // on confirm
        that.$http.get(matchmakerTerminateUri + '?id=' + that.dataList[index].id).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.$toast.fail(msg);
          } else {
            that.dataList.splice(index, 1);
          }
        }, response => {
          // error callback
        })
      }).catch(() => {  // on cancel

      });
    },
    requestData() {
      const that = this;
      this.loading = true;
      const url = matchmakerListsUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.$toast.fail(msg);
        } else {
          that.loading = false;
          if (that.currentPage >= data.last_page) {
            that.finished = true;
          }
          that.currentPage = that.currentPage + 1;
          for (let i = 0; i < data.data.length; i++) {
            that.dataList.push(data.data[i]);
          }
          that.total = data.total;
          that.lastPage = data.last_page;
        }
      }, response => {
        // error callback
      })
    }
  },
  mounted: function () {

  }
}
</script>

<style scoped>
  .avatar {
    height: 30px;
    width: 30px;
    border-radius: 15px;
  }
</style>
